{% extends "templates/base.html" %}
{% load static %}
{% block head %}
<style>
  #clock {
    font-family: 'Digital-7 Mono', monospace; /* 使用类似电子时钟的字体，如果没有则回退到monospace */
    font-size: 48px; /* 设置字体大小 */
    color: #198754; /* 设置字体颜色 */
    text-align: center; /* 文本居中显示 */
    /* 顶部外边距 */
  }
    </style>
{% endblock %}
{% block content %}
    <div style="width: 100%;height: 900px;margin: 30px">
    <!-- 安全地嵌入图表HTML -->
    <div style="width: 400px;height: 720px;float: left;">
        <!-- 添加用于显示时间的 div -->
        <div id="clock"></div>

        <!-- 添加用于显示日期的 div -->
        <div style="width: 400px; height: 60px; text-align: center; line-height: 60px; font-size: 20px;"
             id="data"></div>


        <h2>人气排行榜</h2>
    <ul style="width: 400px;height: 650px;overflow-y: auto;">
        {% for renqi in carrenqi_list %}
     <div style="width: 400px;height: 130px;border-bottom: #e9ecef 1px solid">
         <span style="padding-top: 50px;font-size: 20px;float: left">{{ forloop.counter }}</span>
         <img src="{{ renqi.images }}" style="width: 100px;height: 80px;margin: 20px;margin-right:-10px;float: left">
         <div style="width: 150px;height: 50px;float: left;margin-top: 40px"><p style="text-align: center">{{ renqi.name }}</p><p style="text-align: center;color: red">{{ renqi.price }}</p></div>
         <div style="padding-top:45px "><span >人气值：{{ renqi.index }}</span></div>
     </div>
     {% endfor %}
    </ul>
    </div>
    <div style="float: left;width: 750px;height: 400px">{{ geo_html|safe }}</div>
        <div style="float: left;width: 450px;height: 300px">{{ pie_html|safe }}</div>
    <div style="float: left;width: 750px">{{ chart_html|safe }}</div>
    <div style="float: left;width: 450px;height: 400px;">{{ word_html|safe }}</div>
    </div>
{% endblock %}

{% block script %}
<script>
 function updateClock() {
        var now = new Date();

        // 格式化时间
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        hours = hours < 10 ? '0' + hours : hours;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;
        var timeString = hours + ':' + minutes + ':' + seconds;

        // 格式化日期
        var year = now.getFullYear();
        var month = String(now.getMonth() + 1).padStart(2, '0');
        var day = String(now.getDate()).padStart(2, '0');
        var days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        var weekday = days[now.getDay()];
        var dateString = `${year}-${month}-${day} ${weekday}`;

        // 更新 div
        document.getElementById('data').innerText = dateString;
        document.getElementById('clock').textContent = timeString;
    }

    // 首次更新时间
    updateClock();
    // 每秒更新时间
    setInterval(updateClock, 1000);
</script>
{% endblock %}